<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <todoHeader 
    @addItem="addFn"
    />

    <!-- 主体部分 -->
    <todoMain 
    :list="showList"
    @changeCheck="changeCheckFn"
    @delFn="delFn"
    @changeAll="changeAllFn"
    />

    <!-- 底部部分 -->
    <todoFoot 
    :list="list"
    @clear="clearFn"
    :type="type"
    @changeType="changeTypeFn"
    />
  </section>
</template>

<script>
import todoHeader from './components/todoHeader.vue'
import todoFoot from './components/todoFoot.vue'
import todoMain from './components/todoMain.vue'
export default {
  components: {
    todoHeader,
    todoFoot,
    todoMain,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('todo')),
      type:'all'
    }
  },
  methods:{
    changeCheckFn(id){
      const obj = this.list.find(item => item.id === id)
      console.log(obj);

      obj.isDone = !obj.isDone
    },
    addFn(value){
      this.list.unshift({
        id:Date.now(),
        name:value,
        isDone:false
      })
    },
    delFn(id){
      this.list = this.list.filter(item => item.id !== id)
    },
    clearFn(){
      this.list = this.list.filter(item => !item.isDone)
    },
    changeTypeFn(val){
      this.type = val
    },
    changeAllFn(val){
      this.list.forEach(item => item.isDone = val)
    }
  },
  computed:{
    showList(){
      const {type,list}=this
      if(type === 'all'){
        return list
      }else if(type ==='active'){
        return list.filter(item => !item.isDone)
      }else {
        return list.filter(item => item.isDone)
      }
    }
  },
  watch:{
    list:{
      handler(){
        localStorage.setItem('todo',JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style></style>
